<template>
  <view>
    <u-navbar title="全部商品" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#222" back-icon-color="#222">
      <!-- <view class="" slot="right">
				<view class="" style="display: flex;align-items: center;margin-right: 20rpx;">
					<image src="../../static/shop/shopcar.png" mode="" style="width: 38rpx;height: 38rpx;"></image>
					<image src="../../static/shop/user.png" mode=""
						style="width: 38rpx;height: 38rpx;margin-left: 30rpx;"></image>
				</view>
			</view> -->
    </u-navbar>
    <!-- 搜索 -->
    <view
      class=""
      style="
        margin: 24rpx 28rpx;
        box-shadow: 0px 0px 10rpx 0px #ff737f;
        border-radius: 36rpx;
        background: #fff;
        display: flex;
        align-items: center;
        height: 72rpx;
        justify-content: space-between;
      "
    >
      <view class="" style="display: flex; align-items: center; padding-left: 25rpx">
        <view class="">
          <image src="https://wenzhen.fuerle168.com/static/index/sousuo.png" mode="" style="width: 34rpx; height: 34rpx"></image>
        </view>
        <view class="">
          <input type="text" placeholder="搜索商品" style="font-size: 26rpx; color: #999999; padding-left: 19rpx" v-model="value" />
        </view>
      </view>

      <view class="" style="display: flex; align-items: center; padding-right: 35rpx">
        <view class="" style="width: 2rpx; height: 30rpx; background: #ff737f"></view>
        <view class="" style="font-size: 28rpx; color: #e50014; padding-left: 30rpx" @tap="self">搜索</view>
      </view>
    </view>

    <!-- 药品区 -->
    <view class="" style="display: flex; align-items: center; flex-wrap: wrap">
      <view
        class=""
        style="width: 44.6%; border-radius: 20rpx; background: #fff; padding-bottom: 28rpx; margin-top: 24rpx; margin-left: 28rpx"
        v-for="(i, k) in list"
        :key="k"
        @tap="shopdetail(i.goods_id)"
      >
        <image :src="img_url + i.goods_image" mode="aspectFill" style="width: 100%; height: 335rpx; border-radius: 20rpx"></image>
        <view class="" style="font-size: 28rpx; padding: 0 10rpx">
          {{ i.goods_name }}
        </view>
        <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 0 10rpx">
          <view class="" style="color: #e50014">
            <text style="font-size: 24rpx">￥</text>
            <text style="font-size: 36rpx">{{ i.specs_price.split('.')[0] }}.</text>
            <text style="font-size: 24rpx">{{ i.specs_price.split('.')[1] }}</text>
          </view>
          <view class="" style="font-size: 24rpx; color: #666">已售{{ i.seles }}件</view>
        </view>
        <view
          class=""
          style="
            width: 106rpx;
            text-align: center;
            line-height: 36rpx;
            font-size: 22rpx;
            color: #e50014;
            height: 36rpx;
            background: #ffedee;
            border-radius: 4rpx;
            margin-left: 15rpx;
          "
        >
          {{ i.label_text }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      img_url: this.img_url,
      background: {
        background: '#FFFFFF'
      },
      id: null,
      page: 1,
      list: [],
      value: ''
    };
  },
  //方法
  methods: {
    shop() {
      this.api({
        url: '/api/shop/wholeGoodsList',
        method: 'post',
        data: {
          label_id: this.id
          // goods_classify:this.id
        }
      }).then((res) => {
        this.list = res.data;
      });
    },
    shopdetail(e) {
      uni.navigateTo({
        url: '/shop/shopdetail/shopdetail?id=' + e
      });
    },
    self() {
      this.api({
        url: '/api/shop/wholeGoodsList',
        method: 'post',
        data: {
          goods_classify: this.id ? this.id : '',
          search: this.value
        }
      }).then((res) => {
        this.list = res.data;
      });
    }
  },
  //首页渲染
  onLoad(options) {
    this.id = options.id;
    this.shop();
  },
  //监听
  watch: {},
  //计算属性
  computed: {}
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}
</style>
